import React, { useEffect, useState } from 'react'
import "./myscss/Home.scss"
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import { Switch } from 'react-vant';
axios.defaults.baseURL = 'http://localhost:3000';
export default function Home() {
    const [fans, setfans] = useState([])
    const [evluate, setevluate] = useState([])
    //获取粉丝
    let getfans = async () => {
        let { data: { pages } } = await axios.get('/zjl_getfans');
        setfans(pages)
    }
    //获取评价
    let getevluate = async () => {
        let { data: { pages } } = await axios.get('/zjl_getevaluate');
        setevluate(pages)
    }
    let navigate = useNavigate()
    let fansclick = () => {
        localStorage.setItem('fans', fans.length)
        navigate('/MinPage/Fans')
    }
    let evaluateclick = () => {
        localStorage.setItem('evluate', evluate.length)
        navigate('/MinPage/evaluate')
    }
    const [img, setImg] = useState([])
    let getimgs = async () => {
        let { data: { imglist } } = await axios.post('/getimg')
        setImg(imglist)
    }
    useEffect(() => {
        getimgs()
        getfans()
        getevluate()

    }, [])
    return (
        <div id='MineHome'>
            <div className="header_title_top">
                <div className="header_title">
                    <h3>我的</h3>
                    <img src="/shezhi.png" alt="" onClick={() => { navigate('/MinPage/Setup') }} />
                </div>
                <div className="header_people">
                    <img src={img[img.length - 1] ? img[img.length - 1].path : ''} alt="" className='headerImg' />
                    <div className='people'>

                        <p>张三  <img className='headerCard' src="/card.png" alt="" />
                            <img src="/bianji.png" alt="" className='headerbianji' />
                        </p>
                        <p className='txt1'>北京协和医院</p>
                    </div>
                </div>
            </div>
            <div className="center">
                <div className="center_left">
                    <div onClick={() => { fansclick() }}>
                        <p>{fans.length}</p>
                        <p>粉丝</p>
                    </div>
                </div>
                <div className="center_left">
                    <div onClick={() => { evaluateclick() }}>
                        <p>{evluate.length}</p>
                        <p>评价</p>
                    </div>
                </div>
            </div>
            <div className="foot">
                <div className="foot_top">
                    <div onClick={() => { navigate('/MinPage/Income') }}>
                        <p> <img src="/shouru.png" alt="" /> <span>我的收入</span></p>
                        <b>&gt;</b>
                    </div>
                    <div onClick={() => { navigate('/MinPage/Barks') }}>
                        <p> <img src="/zhanghu.png" alt="" /> <span>我的账户</span></p>
                        <b>&gt;</b>
                    </div>
                    <div onClick={() => { navigate('/recipe') }}>
                        <p> <img src="/chufang.png" alt="" /> <span>我的处方</span></p>
                        <b>&gt;</b>
                    </div>
                </div>
                <div className="foot_bottom">
                    <div onClick={() => { navigate('/servset') }}>
                        <p> <img src="/fuwushezhi.png" alt="" /> <span>服务设置</span></p>
                        <b>&gt;</b>
                    </div>
                    <div className='aaaa'>
                        <p> <img src="/xiaoxitishi.png" alt="" /> <span>消息提醒</span></p>
                        <div className='newb'>
                            <Switch defaultChecked size="20px" />
                        </div>
                    </div>

                    <div onClick={() => { navigate('/feedback') }}>
                        <p> <img src="/fankui.png" alt="" /> <span>意见反馈</span></p>
                        <b>&gt;</b>
                    </div>
                </div>
            </div>
        </div>
    )
}
